<template>
  <div class="login">
    <div class="img">
      <img src="../assets/img/5.png" alt="" />
    </div>
    <p>爱康智慧管家</p>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        placeholder="请输入员工号"
        :rules="[{ required: true, message: '请输入员工号' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        placeholder="请填写密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="submit"
        >
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import api from "../api";
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    ...mapMutations("logMod", ["set"]),
    onSubmit(values) {},
    submit() {
      console.log(this.username, this.password);
      api
        .login({
          username: this.username,
          password: this.password,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            this.set(this.username);
            localStorage.setItem("user", this.username);
            this.$router.push("/message");
          } else {
            // Toast.fail('res.data.msg');
            // Toast('res.data.msg');
            // Notify('通知内容');
            console.log(res);
          }
        });
    },
  },
};
</script>

<style scoped>
.login {
  height: 100%;
}
img {
  width: 4rem;
  height: 4rem;
}
.img {
  text-align: center;
  padding-top: 2rem;
}
p {
  font-size: 0.5rem;
  font-weight: bold;
  text-align: center;
  margin-top: 0.1rem;
  margin-bottom: 1.8rem;
}
.van-cell {
  width: 80%;
  margin-left: 0.7rem;
  margin-bottom: 0.2rem;
}
/* .van-form{
 text-align: center;
} */
</style>
